<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<!-- <link rel="stylesheet" href="css/header.css" /> -->
	</head>

	<body>
		<!-- 头部标题栏 -->
		<header class="mui-bar mui-bar-nav">
			<a  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="touch-action: none;" id="BackToMap"></a>
			<h1 class="mui-title">个人中心</h1>
		</header>
		
		<!-- 主体部分 -->
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" id="link_myface">
						<span style="line-height: 42px;color: dimgray;margin-left: 3px;" class="mui-icon mui-icon-arrowright mui-pull-right"></span>
						<img id="img_my_face" class="mui-media-object mui-pull-right" src="css/registLogin/bear.jpeg" style="line-height: 42px;">
						<div class="mui-media-body">
							头像
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="link_nickname" href="javascript:;">
						<span id="span_nickname" class="mui-pull-right" style="line-height: 42px; color: dimgray;font-size: 16px;"></span>
						<div class="mui-media-body">
							昵称
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span id="span_username" class="mui-pull-right" style="line-height: 42px; color: dimgray;font-size: 16px;"></span>
						<div class="mui-media-body">
						    账号信息
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="link_myQRcode" href="javascript:;">
						<span style="line-height: 42px;color: dimgray;margin-left: 3px;" class="mui-icon mui-icon-arrowright mui-pull-right"></span>
						<img class="mui-media-object mui-pull-right" src="images/qrcode.png" style="max-width: 35px;height: 35px;">
						<div class="mui-media-body">
						    二维码
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="link_scanLogo" href="javascript:;">
						<span style="line-height: 42px;color: dimgray;margin-left: 3px;" class="mui-icon mui-icon-arrowright mui-pull-right"></span>
						<div class="mui-media-body">
						    扫一扫识别Logo
						</div>
					</a>
				</li>
			</ul>
			<br />
			<ul class="mui-table-view" style="width: 90%; margin-left: 5%;border-radius: 10%;">
				<li class="mui-table-view-cell mui-media">
					<a id="link_logout" href="javascript:;">
						<div class="mui-media-body" style="text-align: center;color: #dd511a;">
							退出登录
						</div>
					</a>
				</li>
			</ul>
		</div>
		<script src="js/app.js"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				window.addEventListener('refresh',function(e){
					refreshUserInfo();
				});
			    //获取当前webview对象，刷新当前登录用户信息
				var currentWebview=plus.webview.currentWebview();
				currentWebview.addEventListener("show",function(){
					//刷新用户信息
					refreshUserInfo();
				});
				
				//退出登录
				var link_logout=document.getElementById("link_logout");
				//绑定监听事件
				link_logout.addEventListener("tap",function(){
					app.userLogout();
					mui.openWindow("map.html","map.html");
				});
				
				//头像事件：触摸头像展示图片
				document.getElementById("link_myface").addEventListener("tap",function(){
					mui.openWindow("myface.html","myface.html");
				});
				
				//昵称事件：
				document.getElementById("link_nickname").addEventListener("tap",function(){
					mui.openWindow("mynickname.html","mynickname.html");
				});
				
				//二维码事件
				document.getElementById("link_myQRcode").addEventListener("tap",function(){
					mui.openWindow("myQRCode.html","myQRCode.html");
				});
				
				//扫一扫识别Logo
				document.getElementById("link_scanLogo").addEventListener("tap",function(){
					mui.openWindow("scanLogo.html","scanLogo.html");
				});
				
				//返回地图事件
				document.getElementById("BackToMap").addEventListener("click",function(){
					console.log("点击了返回")
					//1.获取webview对象
					var webview_map =  plus.webview.getWebviewById("map.html");
					//2.触发事件
					mui.fire(webview_map,"refresh");
					//3.页面跳转
					mui.openWindow("map.html","map.html");
					console.log("跳转成功");
				})
			});
			
			/**
			 * 刷新用户信息
			 */
			function refreshUserInfo(){
				var user=app.getUserGlobalInfo();
				var faceImage=user.faceImage;
				var nickname=user.nickname;
				var username=user.username;
				
				var span_nickname=document.getElementById("span_nickname");
				var span_username=document.getElementById("span_username");
				
				//将user信息动态写入
				span_nickname.innerHTML=nickname;
				span_username.innerHTML=username;
				//判断头像是否为空
				if(app.isNotNull(faceImage)){
					var img_my_face=document.getElementById("img_my_face");
					img_my_face.src=app.imgServerUrl+faceImage;
					console.log("头像地址："+app.imgServerUrl+faceImage)
				}
			}
		</script>
	</body>

</html>
